﻿
@{
    ViewData["Title"] = "UpPhoto";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>上传图片</h1>
<div style="display:flex;width:1000px">
    <div class="layui-form-item">
    <button class="layui-btn" id="add">上传图片</button>   
   </div>
  </div>
<div class="parent-div" id="photoShow">

</div>
<div id="demo-laypage-all"></div>

<div id="roomTypeAdd" style="display:none">
    <form class="layui-form">
          <div class="layui-form-item" style="display:none">
            <label class="layui-form-label"><span style="color:red">*</span>照片id</label>
            <div class="layui-input-block">
                <input type="text" name="storePhotoId" id="storePhotoId" placeholder="总id">
            </div>
        </div>
   
       <div class="layui-form-item">
          <label class="layui-form-label">图片名称</label>
          <div class="layui-input-block">
             <input type="text" name="storePhotoName" id="storePhotoName" lay-search="required" lay-verify="storePhotoName" maxlength="10" placeholder="请输入1-10个字符" autocomplete="off" class="layui-input">
          </div>
      </div>

      <div class="layui-form-item" style="display:none">
          <label class="layui-form-label">类型id</label>
          <div class="layui-input-block">
             <input type="text" name="storeTypeId" id="storeTypeId"  lay-verify="storePhotoName" maxlength="10" placeholder="请输入1-10个字符" autocomplete="off" class="layui-input">
          </div>
      </div>

      <div class="layui-form-item">
          <label class="layui-form-label">上传图片</label>
          <div class="parent-div">
          <div >
              <input type="text" name="storePhotoImg" hidden/>
            <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 120px; height: 120px;">
          </div>
           <div>
              <button type="button" id="ID-upload-demo-btn" class="layui-btn layui-btn-sm">
                    <i class="layui-icon layui-icon-add-1"></i>
            </button>
          </div>
       </div>
      </div>
      
       <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                <button id="adds"  class="layui-btn" lay-submit lay-filter="submitForm">保存</button>
                 <button id="xiu"  class="layui-btn" lay-submit lay-filter="edits">修改</button>
            </div>
        </div>

   </form>
</div>


 <style>
      .parent-div > div {
      display: inline-block;
      margin-right: 20px;
    }
 </style>
<script>
  layui.use(['table', 'jquery', 'layer', 'form', 'laypage', 'element', 'util', 'laydate','upload'], function () {
    var table = layui.table;
    var $ = layui.jquery;
    var form = layui.form;
    var layer = layui.layer;
    var laypage = layui.laypage;
    var element = layui.element;
    var util = layui.util;
    var laydate = layui.laydate;
    var upload=layui.upload;
    //接收id值
 
        var storeTypeId=location.search.split('=')[1];
         //show();



     //弹出层
    $(".layui-btn").click(function () {
        var id = $(this).attr('id');
        $("#xiu").hide();
        if (id === "add") {
            var index = layer.open({
                type: 1,
                area: ['630px', '360px'],
                shade: false, // 不显示遮罩
                content: $('#roomTypeAdd'), // 捕获的元素
                end: function () {
                    // layer.msg('关闭后的回调', {icon:6});
                }
            });
        }  
    });
     var total = 0;
     var storetyprId=location.search.split("=")[1];
   
    //显示
    function show() {
        $.ajax({
            url: 'http://localhost:5174/api/StorePhoto/GetStorePhotoShow',
            type: 'post',
            contentType: "application/json",
            data: JSON.stringify({"index": 1,"pagesize": 10,"storeTypeId":storetyprId}),
            headers: {
                "Authorization": "Bearer " + localStorage.getItem('token')
            },
            async: true,
            success: res => {
                console.log(res.data.data)
              var content=``;
               $.each(res.data.data,function(index,item){
                   content+=` <div class="layui-card"  style="width:250px; height=250px">
        <div class="layui-card-body">
        
          <img src="${item.storePhotoImg}" id="photos" alt="图片描述" width="200" height="200"> <!-- 调整图片的宽高以适应需求 -->
        </div>
       <div class="layui-card-header" >
           <button type="button" class="layui-btn layui-btn-sm" lay-event="editPhoto" data-id="${item.storePhotoId}" style="margin-right:100px">
             <i class="layui-icon layui-icon-edit"></i>
           </button>
           <button type="button" class="layui-btn layui-btn-sm"  lay-event="deletePhoto" data-id="${item.storePhotoId}">
             <i class="layui-icon layui-icon-delete"></i>
           </button>
       </div>
       </div>`;
               })
               $("#photoShow").html(content);
  

            },
            error: function (error) {
                console.error(error);
            }
        })
    }
     show();

      $(document).on('click', '[lay-event="editPhoto"]', function() {
                var storePhotoId = $(this).attr('data-id');
              layer.open({
                  title: '编辑 - id:'+ storePhotoId,
                  type: 1,
                  shade: false, // 不显示遮罩
                  area: ['80%', '80%'],
                  content: $('#roomTypeAdd'),
                  end: function () {
                      // layer.msg('关闭后的回调', {icon:6});
                  }
              });

          $.ajax({
            url: 'http://localhost:5174/api/StorePhoto/GetStorePhotoFind',  // 替换成实际的接口地址
            type: 'GET',
            data: $(this).data(),  // 传递的参数
            success: res=> {

                // 将数据填充到表单中
                document.getElementById('storePhotoId').value = res.data.storePhotoId;
                 //document.getElementById('storeTypeId').value = storeTypeId;
                $("#storePhotoName").val(res.data.storePhotoName)
               $("[name=storePhotoImg]").val(res.data.storePhotoImg)
               
                document.getElementById('ID-upload-demo-img').src  = res.data.storePhotoImg;
            
                
               },
            error: function (xhr, status, error) {
                console.error('Error fetching user data:', error);
                // 处理错误情况
             }

        });
     })

     var photoUrl;
       // 单图片上传
  var uploadInst = upload.render({
    elem: '#ID-upload-demo-btn',
    url: 'http://localhost:5174/api/Store/Upload', // 实际使用时改成您自己的上传接口即可。
    before: function(obj){
        console.log(obj)
      // 预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
        
      });
    },
    done: function(res){
      // 若上传失败
      console.log(res)
      photoUrl="http://localhost:5174"+res.msg;
      console.log(photoUrl)
      $("[name=storePhotoImg]").val(photoUrl)
    },
    error: function(){
    }
 
  });

   //添加商品
    form.on('submit(submitForm)', function (data) {
        console.log(data.field);  
          data.field.storeTypeId = storeTypeId; // 将storeTypeId添加到data.field中
          document.getElementById('storeTypeId').value = storeTypeId;
        data.elem.disabled = true;//防止重复提交
        $.ajax({
            url: 'http://localhost:5174/api/StorePhoto/GetStorePhotoAdd',
            type: 'post',
            contentType: "application/json",
            data: JSON.stringify(data.field),
            success: function (res) {
                // 添加成功后的操作
                if (res.code > 0) {
                    layer.msg("添加成功");
                     var index = layer.getFrameIndex('roomTypeAdd');
                     layer.close(index); // 关闭弹出层
                     location.reload(); // 刷新页面
                    show()
                }
            }
        });
        return false;
    });




      
        //修改商户
  form.on('submit(edits)', function (data) {
      console.log(data.field);
          
        //data.elem.disabled = true;//防止重复提交
           // $("#edit").prop("disabled", true); // 禁用提交按钮
            $.ajax({
                url: 'http://localhost:5174/api/StorePhoto/GetStorePhotoUpd',
                type: 'post',
                contentType: "application/json",
                data: JSON.stringify(data.field),

                success: function (res) {

                    // 添加成功后的操作
                    if (res.code > 0) {
                        layer.msg("修改成功");
                        var index = layer.getFrameIndex('index'); // 获取弹出层的索引
                        layer.close(index);
                    }
                }
            });
            return false;
        });

        // 删除功能
$(document).on('click', '[lay-event="deletePhoto"]', function () {
    var data = $(this).data(); // 获取当前按钮的数据属性
    layer.confirm('确定要删除该行数据吗？', function (index) {
        // 执行删除操作...
        var myArray = [];
        myArray.push(data.id) // 使用正确的属性名获取 storePhotoId
        console.log(myArray)
        $.ajax({
            url: 'http://localhost:5174/api/StorePhoto/GetDelStorePhoto',
            type: 'post',
            contentType: "application/json",
            data: JSON.stringify({ storePhotoId: myArray }),
            headers: {
                "Authorization": "Bearer " + localStorage.getItem('token')
            },
            success: function (res) {
                if (res.code > 0) {
                    layer.msg("删除成功");
                    show()
                }

                // 删除成功后的操作
            }
        });
        layer.close(index);
    });
});
         
     

          
      
  
    

  });

</script>